class JieMian extends HTMLDivElement {
	jiaZaiZhong = null
	kaiShiCaiDan = null
	caiDan = null
	yiDongJieMian = null
	jiNengTiao = null
	zhunXing = null
	bianJiMianBan = null
	
	constructor() {
		super()
		
		let shadow = this.attachShadow({ mode: 'open' })
		// 外部样式
		const waiBuYangShi = document.createElement("link", { is: 'wai-bu-yang-shi' });
		shadow.appendChild(waiBuYangShi);
		// 内部样式
		let style = document.createElement('style')
		style.textContent = `
			* {
				pointer-events: all;
			}
		`
		shadow.appendChild(style)
		// 加载中
		this.jiaZaiZhong = document.createElement('jia-zai-zhong')
		shadow.appendChild(this.jiaZaiZhong)
		// 开始菜单
		this.kaiShiCaiDan = document.createElement('dialog', { is: 'kai-shi-cai-dan' })
		shadow.appendChild(this.kaiShiCaiDan)
		// 移动端控制界面
		this.yiDongJieMian = document.createElement('yi-dong-jie-mian')
		shadow.appendChild(this.yiDongJieMian)
		// 菜单
		this.caiDan = document.createElement('cai-dan')
		shadow.appendChild(this.caiDan)
		// 技能条
		this.jiNengTiao = document.createElement('ji-neng-tiao')
		shadow.appendChild(this.jiNengTiao)
		// 准星
		this.zhunXing = document.createElement('div')
		this.zhunXing.style = `
			background: #5af;
			width: 7px;
			height: 7px;
			border-radius: 50%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: none;
		 `
		shadow.appendChild(this.zhunXing)
		 // 编辑面板
		this.bianJiMianBan = document.createElement('bian-ji-mian-ban')
		shadow.appendChild(this.bianJiMianBan)
	}
}

customElements.define('jie-mian', JieMian, { extends: 'div' })

export let jieMian = document.querySelector('#jie-mian')